<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { IMenuItem }      from "@/interface/IHome.ts";
import { RouterLink }     from "vue-router";
import { Fold }           from "@element-plus/icons-vue";

const logo = ref( '/img/logo.png' );
const drawerOpen = ref( false );
const handleSelect = ( key, keyPath ) => {
  drawerOpen.value = false;
  console.log( key, keyPath );
};
const defaultIndex = ref<string>( '1' );
const menuList = ref<IMenuItem[]>( [
  {
    index : '1',
    path : '/',
    title : '首页',
    icon : "House",
  },
  {
    index : '2',
    path : '/product',
    title : '产品',
    icon : "Menu",
  },
  {
    index : '3',
    path : '/help',
    title : '帮助',
    icon : "Help",
  },
  {
    index : '4',
    path : '/about',
    title : '关于',
    icon : "InfoFilled",
  },
] );
onMounted( () => {
  console.log( 'onMounted' );
} );
</script>

<template>
  <div class="flex flex-row justify-between">
    <div><el-image :src="logo" style="height: var(--header-height);margin-left: 20px;" /></div>
    <div style="line-height: var(--header-height);text-align: right;padding-right: 10px;">
      <el-button type="primary" plain>登录</el-button>
      <el-button type="primary" plain>注册</el-button>
      <el-button type="primary" plain @click="drawerOpen = true">
        <el-icon><Fold /></el-icon>
      </el-button>
    </div>
  </div>
  
  <el-drawer v-model="drawerOpen" title="菜单" :with-header="false" size="200">
    <el-menu mode="vertical" :default-active="defaultIndex" @select="handleSelect">
        <template v-for="item in menuList">
          <el-menu-item :index="item.index">
            <RouterLink :to="item.path">
              <el-icon><component :is="item.icon"></component></el-icon>{{ item.title }}
            </RouterLink>
          </el-menu-item>
        </template>
      </el-menu>
  </el-drawer>
</template>

<style scoped>
.el-menu {
  border-right: none;
}

.el-menu > .el-menu-item {
  padding: 0;
}

.el-menu-item a {
  padding: 0 var(--el-menu-base-level-padding);
  color: var(--el-menu-text-color);
}
</style>